<script lang="ts" setup>
import { reactive, watch } from 'vue';
import iconsData from '@/common/icons-data';

interface IProps {
  visible: boolean
  /**
   * 选择图标后自动关闭选择器
   */
  selectedClose?: boolean
}

interface IEmits {
  (e: "update:visible", value: boolean): void
  (e: "selected", value: string): void
}

const emits = defineEmits<IEmits>();
const props = withDefaults(defineProps<IProps>(), {
  selectedClose: true
});
const state = reactive({
  selectedClose: true,
  visible: false,
  // line, solid
  style: "line"
});
const icons: any = reactive({
  line: iconsData.filter(x => x.indexOf("-o") != -1),
  solid: iconsData.filter(x => x.indexOf("-o") == -1)
});

const onSelected = (className: string) => {
  emits("selected", className);
  if (props.selectedClose) {
    state.visible = false;
  }
}

watch(() => props.visible, () => {
  state.visible = props.visible;
});
watch(() => state.visible, () => {
  emits("update:visible", state.visible);
})
</script>
<script lang="ts">
export default { name: "FontawesomeIconSelect" }
</script>

<template>
  <!-- fontawesome 图标选择器 -->
  <a-drawer size="large" destroyOnClose v-model:visible="state.visible" title="图标选择器" placement="right">
    <a-radio-group class="radio-group" v-model:value="state.style">
      <a-radio-button value="line">线框风格</a-radio-button>
      <a-radio-button value="solid">实底风格</a-radio-button>
    </a-radio-group>
    <a-card>
      <template v-for="(className, itemIndex) in icons[state.style]" :key="itemIndex">
        <a-card-grid @click="onSelected(className)" style="width: 12.5%; text-align: center">
          <span class="icon" :class="className"></span>
        </a-card-grid>
      </template>
    </a-card>
  </a-drawer>
</template>

<style lang="less" scoped>
.radio-group {
  margin-bottom: 15px;
}

.icon {
  font-size: 20px;

  &::before {
    font-size: 20px;
  }
}
</style>